<template>
  <div class="loginComponent">
    <!-- 背景图片 -->
    <div class="bg"></div>
    <!-- 表单 -->
    <div class="container">
      <!-- 标题及logo -->
      <div class="header">
        <img src="../assets/logo.png" />
        <span>&emsp;电商后台管理系统</span>
      </div>
      <!-- 标签页 -->
      <a-tabs class="tabs">
        <!-- 登录标签页 -->
        <a-tab-pane key="1" tab="登录">
          <div class="item">
            <a-input
              v-model:value="loginForm.username"
              size="large"
              placeholder="用户名"
            >
              <template #prefix>
                <UserOutlined />
              </template>
            </a-input>
          </div>
          <div class="item">
            <a-input
              v-model:value="loginForm.password"
              size="large"
              placeholder="密码"
            >
              <template #prefix>
                <LockOutlined />
              </template>
            </a-input>
          </div>
          <div class="item">
            <a @click="forgetpasswordHandle">忘了密码</a>
          </div>
          <div class="item">
            <a-button @click="login" size="large" type="primary">登录</a-button>
          </div>
        </a-tab-pane>
        <!-- 注册标签页 -->
        <a-tab-pane key="2" tab="注册">
          <div class="item">
            <a-input
              size="large"
              placeholder="用户名"
              v-model:value="registerForm.username"
            >
              <template #prefix>
                <UserOutlined />
              </template>
            </a-input>
          </div>
          <div class="item">
            <a-input
              size="large"
              placeholder="密码"
              v-model:value="registerForm.password"
            >
              <template #prefix>
                <LockOutlined />
              </template>
            </a-input>
          </div>
          <div class="item">
            <a-input
              size="large"
              placeholder="邀请码"
              v-model:value="registerForm.inviteCode"
            >
              <template #prefix>
                <LockOutlined />
              </template>
            </a-input>
          </div>
          <div class="item">
            <a-button @click="register" size="large" type="primary">
              注册
            </a-button>
          </div></a-tab-pane
        >
      </a-tabs>
    </div>
    <a-modal
      v-model:visible="forgetVisible"
      title="申请忘了密码"
      @ok="handleOk"
    >
      <a-input placeholder="申请用户名" v-model:value="forgetUsername" />
    </a-modal>
  </div>
</template>

<script>
import { defineComponent, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import store from '../store'
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import { authService, resetPasswordService } from '../services'
import { handleResult } from '../helpers/utils'
import { getCharacterInfoById } from '../helpers/character'
import { setToken } from '../helpers/token'
export default defineComponent({
  components: {
    UserOutlined,
    LockOutlined
  },
  setup () {
    const router = useRouter()

    // =================== 注册相关业务 begin =================== //
    /** 注册表单数据 */
    const registerForm = reactive({
      username: '',
      password: '',
      inviteCode: ''
    })

    /** 注册业务 */
    const register = async () => {
      // 校验表单数据是否为空
      if (
        registerForm.username === '' ||
        registerForm.password === '' ||
        registerForm.inviteCode === ''
      ) {
        message.info('用户名，密码，注册码不能为空')
        return
      }

      const res = await authService.register(registerForm)
      handleResult(res).success(({ msg }) => {
        message.success(msg)
      })
    }
    // ==================== 注册相关业务 end ==================== //

    // =================== 登录相关数据和业务 begin =================== //
    const loginForm = reactive({
      username: '',
      password: ''
    })

    /** 登录业务 */
    const login = async () => {
      // 校验表单数据是否为空
      if (loginForm.username === '' || loginForm.password === '') {
        message.info('用户名，密码不能为空')
        return
      }
      const res = await authService.login(loginForm)
      handleResult(res).success(({ msg, data: { user, token } }) => {
        store.commit('setUserInfo', user)
        store.commit('setUserCharacter', getCharacterInfoById(user.character))
        setToken(token)
        router.replace('/goods')
      })
    }
    // ==================== 登录相关数据和业务 end ==================== //

    const forgetVisible = ref(false)
    const forgetUsername = ref('')
    const forgetpasswordHandle = () => {
      forgetVisible.value = true
    }
    const handleOk = async () => {
      const res = await resetPasswordService.add(forgetUsername.value)
      handleResult(res).success(({ msg }) => {
        message.success(msg)
        forgetVisible.value = false
      })
    }

    return {
      registerForm,
      register,
      loginForm,
      login,
      forgetVisible,
      forgetpasswordHandle,
      handleOk,
      forgetUsername
    }
  }
})
</script>

<style lang="scss" scoped>
// 登录组件
.loginComponent {
  user-select: none;
  // 登录组件背景
  .bg {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -999;
    background-image: url(https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg);
    background-size: 100% 100%;
    background-position: center;
  }
  .container {
    margin: 150px auto;
    width: 400px;
    background: pink;

    .header {
      text-align: center;
      height: 70px;
      img {
        width: 70px;
        vertical-align: middle;
      }
      span {
        font: 30px bold black;
        vertical-align: middle;
      }
    }

    .tabs {
      margin-top: 20px;
      text-align: center;
      .item {
        margin: 20px auto;
        width: 80%;
        button {
          width: 100%;
        }
      }
    }
  }
}
</style>
